<script setup>
import { computed } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { inputValueToInt } from '@/util/index.js';

const props = defineProps(['value', 'max', 'switchable', 'className']);
const emit = defineEmits(['change']);

const calcIndex = computed(() => R.compose( R.dec, R.clamp(1, props.max), inputValueToInt  ));
</script>

<template>
  <div class="serial-num">
    <slot name="extraLeft"></slot>

    <a-button
      :disabled="!props.switchable.prev"
      @click="() => emit('change', props.value - 1)">
      <template #icon><left-outlined /></template>
    </a-button>

    <a-input-number
      title="若确认请按 Enter"
      :class="props.className"
      :min="1"
      :max="props.max"
      :controls="false"
      size="small"
      :value="value + 1"
      @pressEnter="event => emit('change', calcIndex(event))">
    </a-input-number>
    /
    <span>{{ props.max }}</span>

    <a-button
      :disabled="!props.switchable.next"
      @click="() => emit('change', props.value + 1)">
      <template #icon><right-outlined /></template>
    </a-button>

    <slot name="extraRight"></slot>
  </div>
</template>

<style>
.base-label .serial-num {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.base-label .serial-num > span {
  width: 1.6em;
  padding-left: .25em;
  padding-right: .25em;
  text-align: center;
}

.base-label .serial-num > .ant-btn {
  height: 100%;
  border-width: 0;
  background: transparent;
}

.base-label .serial-num > .ant-btn .anticon { font-size: 12px; }

.base-label .serial-num > .ant-input-number {
  width: 32px;
  margin-right: 4px;
}

.base-label .serial-num > .ant-input-number.pass { border-color: rgb(0,200,0); }
.base-label .serial-num > .ant-input-number-focused.pass { box-shadow: 0 0 0 2px rgba(0,200,0,.2); }

.base-label .serial-num > .ant-input-number.reject { border-color: rgb(200,0,0); }
.base-label .serial-num > .ant-input-number-focused.reject { box-shadow: 0 0 0 2px rgba(200,0,0,.2); }
</style>
